<template>
	<view class="map">
		<!-- 自定义头部 -->
		<u-navbar title="德亿安" fixed :border="false">
			<view class="location" slot="left"></view> 
			<!-- #ifdef MP -->
			<view class="search mp" slot="center" @click="toSearchPage">
				<view class="search-input"><text>搜索目的地/充电桩</text></view>
				<view class="icon"><text>搜索</text></view>
			</view>
			<!-- #endif -->
			
			<!-- #ifndef MP -->
			<view class="search" slot="center" @click="toSearchPage">
				<view class="search-input"><text>搜索目的地/充电桩</text></view>
				<view class="icon"><text>搜索</text></view>
			</view> 
			<!-- #endif -->
		</u-navbar>
		
		<!-- 筛选条件 -->
		<view class="filter sticky" :style="{top: (navBarHeight - 1) + 'px'}">
			<view class="filter-item" @click="openFilter('parking')">
				<text>停车费</text>
				<u-icon name="arrow-down-fill" size="20rpx" color="#333333"></u-icon>
			</view>
			<view class="filter-item" @click="openFilter('charging')">
				<text>充电方式</text>
				<u-icon name="arrow-down-fill" size="20rpx" color="#333333"></u-icon>
			</view>
			<view class="filter-item" @click="openFilter('facility')">
				<text>配套服务</text>
				<u-icon name="arrow-down-fill" size="20rpx" color="#333333"></u-icon>
			</view>
			<view class="filter-item" @click="openFilter('more')">
				<text>更多筛选</text>
				<u-icon name="arrow-down-fill" size="20rpx" color="#333333"></u-icon>
			</view>
		</view>
		
		<map 
			ref="map" 
			id="map" 
			:scale="16" 
			:latitude="latitude"
			:longitude="longitude" 
			:show-compass="true" 
			:show-location="true" 
			@markertap="dpcdetail"
			@callouttap="dpcdetail"
			@labeltap="dpcdetail"
			:markers="allMarkers"
			:style="{ height: (contentHeight - navBarHeight + 30) + 'px', width: '100%', marginTop: (navBarHeight + 30) + 'px' }"
		>
			<cover-view slot="callout">
				<block v-for="item in covers" :key="item.id">
					<cover-view class="custom-callout" :marker-id="item.id" @click.stop="toDetail(item.id)">
						<cover-view class="callout-content">
							<cover-view class="price flex">
								<cover-view class="symbol">¥</cover-view>
								<cover-view class="money">{{ item.custom.money || 0 }}</cover-view>
								<cover-view class="text">/度</cover-view>
							</cover-view>
							<cover-view class="label flex" style="justify-content: center;margin-top: 4rpx;" :class="statusMap[item.custom.type]">
								<cover-view class="status">超</cover-view>
								<cover-view class="value flex">
									<cover-view class="text1">闲 {{ item.custom.available }}</cover-view>
									<cover-view class="text2">/ {{ item.custom.total }}</cover-view>
								</cover-view>
							</cover-view>
						</cover-view>
					</cover-view>
				</block>
			</cover-view>
		</map>
		
		<view class="mylocation" @tap="dingwei">
			<image src="@/static/location.png" mode=""></image>
		</view> 
		
		<!-- 更多筛选弹窗 -->
		<filter-popup
			:show="showFilter"
			:filter-type="filterType"
			:active-filters="formData"
			@close="showFilter = false"
			@confirm="handleFilterConfirm"
		/>
		
		<com-map ref="commap" @myevent="setlocation"></com-map>
		<com-tabbar currentTab="mapIndex"></com-tabbar>
	</view>
</template>

<script>
	import { mapState, mapActions } from 'vuex'
	import { getNavBarHeight, setNavBarHeightVar } from '@/utils/system.js'
	export default {
		data() {
			return {
				show: true,
				id: 0,
				latitude: '',
				longitude: '',
				covers: [],
				currentLocationMarker: {},
				allMarkers: [],
				detail: null,
				currentTab: 'mapIndex',
				navBarHeight: 0,
				contentHeight: 0,
				statusMap: {
					0: 'super',
					1: 'fast',
					2: 'slow'
				},
				
				showFilter: false,
				filterType: 'more',
				formData: {
					pageNo: 1,
					pageSize: 100,
					userLatitude: 13.9431,
					userLongitude: 158.4491,
				}
			}
		},
		onShow() {
			this.show = false //点击地图弹框默认隐藏
		},
		onLoad() {
			this.navBarInfo = getNavBarHeight()
			const { statusBarHeight, navBarHeight } = setNavBarHeightVar()
			this.statusBarHeight = statusBarHeight
			this.navBarHeight = navBarHeight
			this.contentHeight = uni.getSystemInfoSync().windowHeight - navBarHeight + 20;
			this.getlist();
			// 监听登录成功的事件
			uni.$on('loginSuccessEvent', () => this.getlist());
		},
		computed: {
			//引入store全局变量
			...mapState(['mylocation', 'mylocationState'])
		},
		methods: {
			openFilter(type) {
				this.filterType = type
				this.showFilter = true
			},
			
			toSearchPage() {
				uni.navigateTo({
					url: '/pages/list/list'
				})
			},
			//电站详情
			dpcdetail(e) {
				uni.navigateTo({
					url: "/pages/index/detail?id=" + e.detail.markerId
				})
			},
			toDetail(id) {
				
			},
			getlist() {
				//判断定位状态
				if (!this.mylocationState) {
					this.$nextTick(() => this.$refs.commap.setlocation())
					return
				} else {
					this.latitude = this.mylocation.latitude
					this.longitude = this.mylocation.longitude
					this.updateCurrentLocationMarker()
				}
				//获取电站列表
				this.$http_api.chargingList(this.formData).then((res) => {
					let { records, total, current, pages } = res
					this.covers = records.filter(item => item.latitude <= 90).map(item => ({
						latitude: item.latitude, 
						longitude: item.longitude,
						iconPath: '/static/weizhi.png',
						width: 30,
						height: 30, 
						id: item.id,
						customCallout: { display: 'ALWAYS' },
						custom: {
							id: item.id,
							type: 0, // 0: super  1: fast  2: slow
							money: item.price,
							available: item?.fastCharging?.available || 0,
							total: item?.fastCharging?.total || 0
						}
					}))
					this.updateAllMarkers();
				})
			},
			
			handleFilterConfirm(activeFilters) {
				try {
					// 更新 formData，移除所有基础字段外的筛选条件
					const baseKeys = ['pageNo', 'pageSize', 'userLatitude', 'userLongitude']
					Object.keys(this.formData).forEach(key => {
						if (!baseKeys.includes(key)) {
							delete this.formData[key]
						}
					})
					// 添加新的筛选条件
					Object.keys(activeFilters).forEach(key => {
						const value = activeFilters[key] || []
						if (value.length > 0) {
							this.formData[key] = value
						}
					})
					// 重新加载数据
					this.getlist(true)
				} catch (error) {
					console.error('Filter confirm error:', error)
				}
			},
			//点击定位到当前位置
			dingwei() {
				this.$nextTick(() => this.$refs.commap.setlocation())
			},
			updateCurrentLocationMarker() {
				this.currentLocationMarker = {
					id: 99999,
					latitude: this.latitude,
					longitude: this.longitude,
					width: 22,
					height: 32,
					zIndex: 99
				};
				this.updateAllMarkers();
			},
			updateAllMarkers() {
				if (this.latitude && this.longitude) {
					this.allMarkers = [...this.covers, this.currentLocationMarker];
				} else {
					this.allMarkers = [...this.covers];
				}
			},
			setlocation(e) {
				this.latitude = e.latitude
				this.longitude = e.longitude
				
				// 移动到当前位置
				uni.createMapContext("map", this).moveToLocation({
					latitude: this.latitude,
					longitude: this.longitude
				});
				this.updateCurrentLocationMarker();
			}
		},
	}
</script>

<style lang="scss" scoped>
	.map {
		position: relative;
	}

	.dzinfo {
		position: absolute;
		bottom: calc(var(--window-bottom, 0) + 150rpx);
		background-color: #fff;
		width: 96%;
		left: 0;
		right: 0;
		margin: 0 auto;
		z-index: 9999;
		border-radius: 28rpx;

		.item {
			// box-shadow:0px 0px 6px #dfdfdf;
			padding: 30rpx 20rpx;

			.gotomap {
				position: absolute;
				right: 20rpx;
				top: 35rpx;
				display: flex;
				font-size: 28rpx;
				color: #333;

				text {
					margin-left: 3px;
				}
			}

			.title {
				font-size: 34rpx;
				font-weight: bold;
			}

			.desc {
				font-size: 30rpx;
				color: #333;
				margin-top: 10rpx;
				margin-bottom: 20rpx;
			}

			.txt {
				font-size: 26rpx;

				.num {
					float: left;
					margin-top: 6rpx;

					.num-su {
						padding: 4rpx 8rpx;
						background: #23BF61;
						color: #fff;
						border-radius: 6rpx;
						margin-right: 15rpx;
					}

					.num-fa {
						padding: 4rpx 8rpx;
						background: #f10000;
						color: #fff;
						border-radius: 6rpx;
						margin-right: 15rpx;
					}

					.num-succ {
						color: #23BF61;
					}

					.num-facc {
						color: #f10000;
					}

					.num-allcc {
						margin-left: 15rpx;
						padding-left: 15rpx;
						border-left: 1px solid #999;
					}
				}

				.detail {
					font-size: 28rpx;
					color: #23BF61;
					border: 1px solid #23BF61;
					border-radius: 40rpx;
					width: 130rpx;
					text-align: center;
					line-height: 46rpx;
					float: right;
				}
			}
		}
	}

	.mylocation {
		position: absolute;
		right: 30rpx;
		bottom: 30%;

		image {
			width: 70rpx;
			height: 70rpx;
			padding: 5px;
			background-color: #fff;
			border-radius: 100%;
		}
	}
	
	.search {
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0 30rpx;
		
		.search-input {
			background: #F3F3F3;
			border-radius: 28rpx;
			height: 65rpx;
			position: relative;
			flex: 2;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			
			text {
				font-weight: 400;
				font-family: "PINGFANG";
				font-size: 24rpx;
				color: #A09FA4;
			}
		}
		
		.icon {
			width: 127rpx;
			height: 65rpx;
			position: absolute;
			right: 30rpx;
			background: url(~@/static/home/searchBg.png) no-repeat;
			background-size: 100% 100%;
			
			display: flex;
			align-items: center;
			justify-content: center;
			
			text {
				font-weight: 400;
				font-family: "PINGFANG";
				font-size: 28rpx;
				color: #fff;
			}
		}
	}
	
	.mp {
		margin: 0 200rpx 0 30rpx;
		transition: all 0.2s;
		.search-input {
			height: 65rpx;
		}
		.icon {
			width: 127rpx;
			height: 65rpx;
			right: 200rpx;
		}
	}
	
	.filter {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #eee;
		background: #fff;
		
		.filter-item {
			display: flex;
			align-items: center;
			
			text {
				color: #777;
				margin-right: 4rpx;
				font-size: 24rpx;
				font-weight: 400;
				font-family: "PINGFANG";
			}
		}
	}
	
	.sticky {
		position: fixed;
		z-index: 999;
		left: 0;
		right: 0;
		background: #fff;
	}
	
	.custom-callout {
		border-radius: 13rpx;
		background: #fff;
	}
	
	.callout-content {
		padding: 10rpx 5rpx;
		.price {
			align-items: baseline;
			justify-content: center;
			.symbol, .money {
				color: #FC0A01;
				font-family: "PINGFANG";
			}
			.symbol {
				font-size: 24rpx;
			}
			.money {
				font-weight: 600;
				font-size: 32rpx;
			}
			.text {
				color: #333;
				font-size: 24rpx;
			}
		}
		
		.status {
			width: 34rpx;
			height: 34rpx;
			line-height: 34rpx;
			border-radius: 6rpx;
			font-size: 22rpx;
			font-weight: 600;
			font-family: "PINGFANG";
			color: #FFFFFF;
			text-align: center;
			position: relative;
			z-index: 1;
		}
		
		.super, .fast, .slow {
			align-items: center;
			.value {
				border-radius: 6rpx;
				height: 34rpx;
				padding: 0 10rpx 0 14rpx;
				margin: 0 0 0 -6rpx;
				align-items: center;
				.text1, .text2 {
					font-family: "PINGFANG";
					font-size: 20rpx;
					font-weight: 400;
					margin: 0 4rpx;
				}
			}
		}
		
		.super {
			.status {
				background: #947DFE;
			}
			.value {
				background: rgba(#947DFE, 0.3);
				.text1 {
					color: #6F52FB;
				}
				.text2 {
					color: #8F77FD;
				}
			}
		}
		
		.fast {
			.status {
				background: linear-gradient( 180deg, #FF8924 0%, #FF6800 100%);
			}
			.value {
				background: #FDF7F0;
				.text1 {
					color: #FF6D06;
				}
				.text2 {
					color: #FF710A;
				}
			}
		}
		
		.slow {
			.status {
				background: linear-gradient( 180deg, #38D99A 0%, #38D99A 100%);
			}
			.value {
				background: #F1EDFC;
				.text1 {
					color: #38D99A;
				}
				.text2 {
					color: #8F77FD;
				}
			}
		}
	}
</style>